<!DOCTYPE html>
<html>
<head>
  <title>Pano Player 全景视频网页播放器</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
  <meta name="mobile-web-app-capable" content="yes">
  <link rel="icon" sizes="196x196" href="panoplayer.png">

  <!-- Fragment shader program -->
  <script id="shader-fs" type="x-shader/x-fragment">
  varying mediump vec3 vDirection;
  uniform mediump float eye;
  uniform mediump float projection;

  uniform sampler2D uSampler;

  #define PI 3.1415926535897932384626433832795

  mediump vec4 directionToColor(mediump vec3 direction, mediump float eye, mediump float projection) {
    /*
    * Input: a direction.  +x = right, +y = up, +z = backward.
    *        an eye. left = 0, right = 1.
    *        a projection. see ProjectionEnum in JS file for enum
    * Output: a color from the video
    *
    * Bug alert: the control flow here may screw up texture filtering.
    */

    mediump float theta = atan(direction.x, -1.0 * direction.z);
    mediump float phi = atan(direction.y, length(direction.xz));

    /*
    * The Nexus 7 and the Moto X (and possibly many others) have
    * a buggy atan2 implementation that screws up when the numerator
    * (the first argument) is too close to zero.  (The 1e-4 is carefully
    * chosen: 1e-5 doesn't fix the problem.
    */
    if (abs(direction.x) < 1e-4 * abs(direction.z))
    theta = 0.5*PI * (1.0 - sign(-1.0 * direction.z));
    if (abs(direction.y) < 1e-4 * length(direction.xz))
    phi = 0.0;

    // Uncomment to debug the transformations.
    // return vec4(theta / (2. * PI) + 0.5, phi / (2. * PI) + 0.5, 0., 0.);

    if (projection == 0.) {
      // Projection == 0: equirectangular projection
      return texture2D(uSampler, vec2(mod(theta / (2.0*PI), 1.0), phi / PI + 0.5));
    } else {
      // Projection == 1: equirectangular top/bottom 3D projection
      eye = 1. - eye;
      return texture2D(uSampler, vec2(mod(theta / (2.0*PI), 1.0), ((phi / PI + 0.5) + eye)/ 2.));
    }
  }

  void main(void) {
    gl_FragColor = directionToColor(vDirection, eye, projection);
  }
</script>

<!-- Vertex shader program -->
<script id="shader-vs" type="x-shader/x-vertex">
  attribute mediump vec2 aVertexPosition;

  uniform mediump mat4 proj_inv;

  varying mediump vec3 vDirection;

  void main(void) {
    gl_Position = vec4(aVertexPosition, 1.0, 1.0);
    mediump vec4 projective_direction = proj_inv * gl_Position;
    vDirection = projective_direction.xyz / projective_direction.w;
  }
</script>

<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/panoplayer.css">
<script src="lib/gl-matrix.js" type="text/javascript"></script>
<script src="lib/util.js" type="text/javascript"></script>
<script src="js/controls.js" type="text/javascript"></script>
<script src="js/player-webgl.js" type="text/javascript"></script>
<script src="js/webvr.js" type="text/javascript"></script>
<script src="js/phonevr.js" type="text/javascript"></script>
<script src="js/panoplayer.js" type="text/javascript"></script>
</head>

<body>

  <div id="video-container">
    <!-- Loading Message -->
    <div id="left-load" class="left">
      <div id="title-l" class="title">载入视频...</div>
      <div id="message-l" class="message">尝试快捷键 WASD + Q/E</div>
    </div>
    <div id="right-load" class="right">
      <div id="title-r" class="title">载入视频...</div>
      <div id="message-r" class="message">尝试快捷键 WASD + Q/E</div>
    </div>
    <div id="left-play" class="left" style="display:none;">
      <a id="play-l" class="large-play fa fa-play fa-5x"></a>
    </div>
    <div id="right-play" class="right" style="display:none;">
      <a id="play-r" class="large-play fa fa-play fa-5x"></a>
    </div>

    <canvas id="glcanvas">
      Your browser doesn't appear to support the HTML5 <code>&lt;canvas&gt;</code> element.
    </canvas>
    <video preload="auto" id="video" loop=true webkit-playsinline>
      <source src="media/oxygentec_demo01.mp4" type='video/mp4'>
      <source src="media/oxygentec_demo02.mp4" type='video/mp4'>
        </video>
        <!-- Video Controls -->
        <div id="video-controls">
          <a id="play-pause" class="fa fa-play icon" title="播放"></a>


          <input type="range" id="seek-bar" value="0">

          <a id="loop" class="fa fa-chain-broken icon" title="暂停循环"></a>

          <a id="mute" class="fa fa-volume-up icon" title="静音"></a>

          <a id="select-local-file" class="fa fa-folder-open icon rfloat" title="选择文件"></a>

          <select id="projection-select" class="rfloat">
            <option value=0>球面投影</option>
            <option value=1>3D球面投影</option>
          </select>

          <select id="video-select" class="rfloat">
            <option value="/media/oxygentec_demo01.mp4">测试视频01</option>
            <option value="/media/oxygentec_demo02.mp4">测试视频02</option>
          </select>

          <a id="full-screen" class="fa fa-expand icon rfloat" title="全屏"></a>
        </div>

        <script>runPanoPlayer();</script>
      </div>

    </body></html>
